<template>
  <div class="main">
    <div class="nav">
      <van-nav-bar
      title="君胜国际影城（深圳同乐店）"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <div class="head">
      <div class="named">君胜国际影城</div>
      <div class="address">龙华区清泉路9号TTMALL星光城3楼</div>
      <img src="@/assets/img/location.png">
      <div class="map">地图</div>
    </div>
    <div class="hidden">
      <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" >
        <ul :class="pictures" class="ul" :style="{'margin-left':-77.5*times+'px'}">
          <li class="mgimg8"></li>
          <li class="mgimg9"></li>
          <li class="mgimg1" :class="big1" @click="move($event)"><img :src="photo1"></li>
          <li class="mgimg2" :class="big2" @click="move($event)"><img :src="photo2"></li>
          <li class="mgimg3" :class="big3" @click="move($event)"><img :src="photo3"></li>
          <li class="mgimg4" :class="big4" @click="move($event)"><img :src="photo4"></li>
          <li class="mgimg5" :class="big5" @click="move($event)"><img :src="photo5"></li>
          <li class="mgimg6" :class="big6" @click="move($event)"><img :src="photo6"></li>
          <li class="mgimg7" :class="big7" @click="move($event)"><img :src="photo7"></li>
          <li class="mgimg10"></li>
        </ul>
      </v-touch>
    </div>
    <div class="sjx"></div>
    <div class="info">
      <div class="title">{{names}}</div>
      <div class="score">{{scores}}</div>
      <div class="fen">分</div>
    </div>
    <div class="intr">{{intrs}}</div>
    <div class="time" v-if="det0">
      <div class="today" :class="colorchange1" @click="datachangea1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangea2">明天9月7日</div>
    </div>
    <div class="time" v-else-if="det1">
      <div class="today" :class="colorchange1" @click="datachangeb1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangeb2">明天9月7日</div>
      <div class="after" :class="colorchange3" @click="datachangeb3">后天9月8日</div>
    </div>
    <div class="time" v-else-if="det2">
      <div class="today" :class="colorchange1" @click="datachangec1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangec2">明天9月7日</div>
    </div>
    <div class="time" v-else-if="det3">
      <div class="today" :class="colorchange1" @click="datachanged1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachanged2">明天9月7日</div>
    </div>
    <div class="time" v-else-if="det4">
      <div class="today" :class="colorchange1" @click="datachangee1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangee2">明天9月7日</div>
    </div>
    <div class="time" v-else-if="det5">
      <div class="today" :class="colorchange1" @click="datachangef1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangef2">明天9月7日</div>
    </div>
    <div class="time" v-else-if="det6">
      <div class="today" :class="colorchange1" @click="datachangeg1">今天9月6日</div>
      <div class="tomorrow" :class="colorchange2" @click="datachangeg2">明天9月7日</div>
    </div>
    <div v-if="much">
      <div class="single1">
        <div class="dt1">
          <div class="begin">{{begintime}}</div>
          <div class="ending">{{endtime}}</div>
          <div class="lang">{{language}}</div>
          <div class="place">{{playplace}}</div>
          <div class="doll">￥</div>
          <div class="price">{{money}}</div>
          <router-link class="buy" to="/seat">购票</router-link>
        </div>
      </div>
      <div class="single1">
        
        <div class="dt1">
          <div class="begin">{{begintime}}</div>
          <div class="ending">{{endtime}}</div>
          <div class="lang">{{language}}</div>
          <div class="place">{{playplace}}</div>
          <div class="doll">￥</div>
          <div class="price">{{money}}</div>
          <router-link class="buy" to="/seat">购票</router-link>
        </div>
      </div>
      <div class="single1">
        <div class="dt1">
          <div class="begin">{{begintime}}</div>
          <div class="ending">{{endtime}}</div>
          <div class="lang">{{language}}</div>
          <div class="place">{{playplace}}</div>
          <div class="doll">￥</div>
          <div class="price">{{money}}</div>
          <button class="buy">购票</button>
        </div>
      </div>
      <div class="single1">
        <div class="dt1">
          <div class="begin">{{begintime}}</div>
          <div class="ending">{{endtime}}</div>
          <div class="lang">{{language}}</div>
          <div class="place">{{playplace}}</div>
          <div class="doll">￥</div>
          <div class="price">{{money}}</div>
          <button class="buy">购票</button>
        </div>
      </div>
    </div>
    <div v-else class="back">
      <img src="@/assets/img/today-no-show.png" alt="">
      <div class="text">影片未上映</div>
      <div class="check">点击查看09月17日场次</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      big1:{
        big:false
      },
      big2:{
        big:true
      },
      big3:{
        big:false
      },
      big4:{
        big:false
      },
      big5:{
        big:false
      },
      big6:{
        big:false
      },
      big7:{
        big:false
      },
      pictures:{
        pic1:false,
        pic2:true,
        pic3:false,
        pic4:false,
        pic5:false,
        pic6:false,
        pic7:false,
      },
      photo1:"/img/pics/mg1.jpg",
      photo2:"/img/pics/lg2.jpg",
      photo3:"/img/pics/mg3.jpg",
      photo4:"/img/pics/mg4.jpg",
      photo5:"/img/pics/mg5.jpg",
      photo6:"/img/pics/mg6.jpg",
      photo7:"/img/pics/mg7.jpg",
      times:1,
      names:'白蛇2：青蛇劫起',
      scores:'9.1',
      intrs:'131分钟 | 冒险 | 唐小喜,张福正,魏超',
      begintime:'14:00',
      endtime:'16:11',
      language:'国语 3D',
      playplace:'六号厅(激光放映厅)',
      money:34.9,
      much:false,
      colorchange1:{colorchange:true},
      colorchange2:{colorchange:false},
      colorchange3:{colorchange:false},
      det0:false,
      det1:true,
      det2:false,
      det3:false,
      det4:false,
      det5:false,
      det6:false,
    }
  },
  methods: {
    onSwipeLeft: function () {},
    onSwipeRight: function () {},
    datachangea1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=true
    },
    datachangea2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }

      this.much=false
    },
    datachangeb1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.colorchange3={
        colorchange:false,
        }
      this.much=false
    },
    datachangeb2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.colorchange3={
        colorchange:false,
        }
      this.much=true
    },
    datachangeb3(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.colorchange3={
        colorchange:true,
        }
      this.much=true
    },
    datachangec1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=true
    },
    datachangec2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.much=false
    },
    datachanged1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=false
    },
    datachanged2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.much=true
    },
    datachangee1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=true
    },
    datachangee2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.much=false
    },
    datachangef1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=false
    },
    datachangef2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.colorchange3={
        colorchange:false,
        }
      this.much=true
    },
    datachangeg1(){
      this.colorchange1={
        colorchange:true,
        }
      this.colorchange2={
        colorchange:false,
        }
      this.much=true
    },
    datachangeg2(){
      this.colorchange1={
        colorchange:false,
        }
      this.colorchange2={
        colorchange:true,
        }
      this.much=false
    },
    move(e) {
      this.x = e.x;
      console.log(this.x)
      if(this.times<6 && (this.x > 230 && this.x < 300)){
       this.times++;
      }else if(this.times > 0 && this.x < 140 && this.x > 60){
        this.times--;
      }else if(this.times<6 && this.x > 300){
        this.times = this.times + 2;
      }else if(this.times>1 &&  this.x < 60){
        this.times = this.times - 2;
      }
      if(this.times===0){
      this.pictures={
          pic1:true,
          pic2:false,
          pic3:false,
          pic4:false,
          pic5:false,
          pic6:false,
          pic7:false,
        }
        this.names="宝可梦：皮卡丘和可可的冒险"
        this.scores=8.2
        this.intrs="98分钟 | 动画 | 松本梨香,大谷育江"
        this.big1={big:true}
        this.big2={big:false}
        this.big3={big:false}
        this.big4={big:false}
        this.big5={big:false}
        this.big6={big:false}
        this.big7={big:false}
        this.det0=true
        this.det1=false
        this.det2=false
        this.det3=false
        this.det4=false
        this.det5=false
        this.det6=false
        this.colorchange1={
        colorchange:true,
        }
        this.colorchange2={
          colorchange:false,
          }
        this.much=true

        // this.det1=false
        // console.log(this.times)
      }else if(this.times===1){
        this.pictures={
          pic1:false,
          pic2:true,
          pic3:false,
          pic4:false,
          pic5:false,
          pic6:false,
          pic7:false,}
        this.names="白蛇2：青蛇劫起"
        this.scores=9.1
        this.intrs="131分钟 | 冒险 | 唐小喜,张福正,魏超"
        this.big1={big:false}
        this.big2={big:true}
        this.big3={big:false}
        this.big4={big:false}
        this.big5={big:false}
        this.big6={big:false}
        this.big7={big:false}
        this.det0=false
        this.det1=true
        this.det2=false
        this.det3=false
        this.det4=false
        this.det5=false
        this.det6=false
        this.colorchange1={
        colorchange:true,
        }
        this.colorchange2={
          colorchange:false,
          }
        this.colorchange3={
          colorchange:false,
          }
        this.much=false
      }else if(this.times===2){
          // console.log(this.times);
          this.pictures={
          pic1:false,
          pic2:false,
          pic3:true,
          pic4:false,
          pic5:false,
          pic6:false,
          pic7:false,
          }
          this.names="梦境人生"
          this.scores=7.8
          this.intrs="106分钟 | 爱情 | 赵文瑄,王琳,王佳佳"
          this.big1={big:false}
          this.big2={big:false}
          this.big3={big:true}
          this.big4={big:false}
          this.big5={big:false}
          this.big6={big:false}
          this.big7={big:false}
          this.det0=false
          this.det1=false
          this.det2=true
          this.det3=false
          this.det4=false
          this.det5=false
          this.det6=false
          this.colorchange1={
          colorchange:true,
          }
          this.colorchange2={
            colorchange:false,
            }
          this.much=true
        // console.log(this.times);
      }else if(this.times===3){
          this.pictures={
          pic1:false,
          pic2:false,
          pic3:false,
          pic4:true,
          pic5:false,
          pic6:false,
          pic7:false,
          }
          this.names="妈妈的神奇小子"
          this.scores=9.2
          this.intrs="102分钟 | 剧情 | 吴君如,张继聪,梁仲恒"
          this.big1={big:false}
          this.big2={big:false}
          this.big3={big:false}
          this.big4={big:true}
          this.big5={big:false}
          this.big6={big:false}
          this.big7={big:false}
          this.det0=false
          this.det1=false
          this.det2=false
          this.det3=true
          this.det4=false
          this.det5=false
          this.det6=false
          this.colorchange1={
          colorchange:true,
          }
          this.colorchange2={
            colorchange:false,
            }
          this.much=false
      }else if(this.times===4){
          this.pictures={
          pic1:false,
          pic2:false,
          pic3:false,
          pic4:false,
          pic5:true,
          pic6:false,
          pic7:false,
          }
          this.names="怒火·重案"
          this.scores=9.5
          this.intrs="128分钟 | 动作 | 甄子丹,谢霆锋,秦岚"
          this.big1={big:false}
          this.big2={big:false}
          this.big3={big:false}
          this.big4={big:false}
          this.big5={big:true}
          this.big6={big:false}
          this.big7={big:false}
          this.det0=false
          this.det1=false
          this.det2=false
          this.det3=false
          this.det4=true
          this.det5=false
          this.det6=false
          this.colorchange1={
          colorchange:true,
          }
          this.colorchange2={
            colorchange:false,
            }
          this.much=true
      }else if(this.times===5){
          this.pictures={
          pic1:false,
          pic2:false,
          pic3:false,
          pic4:false,
          pic5:false,
          pic6:true,
          pic7:false,
          }
          this.names="失控玩家"
          this.scores=9.0
          this.intrs="114分钟 | 动作 | 瑞安·雷诺兹,朱迪·科默"
          this.big1={big:false}
          this.big2={big:false}
          this.big3={big:false}
          this.big4={big:false}
          this.big5={big:false}
          this.big6={big:true}
          this.big7={big:false}
          this.det0=false
          this.det1=false
          this.det2=false
          this.det3=false
          this.det4=false
          this.det5=true
          this.det6=false
          this.colorchange1={
          colorchange:true,
          }
          this.colorchange2={
            colorchange:false,
            }
          this.much=false
      }else{
        this.pictures={
          pic1:false,
          pic2:false,
          pic3:false,
          pic4:false,
          pic5:false,
          pic6:false,
          pic7:true,
          }
          this.names="明日之战"
          this.scores=8.6
          this.intrs="140分钟 | 动作 | 克里斯·帕拉特"
          this.big1={big:false}
          this.big2={big:false}
          this.big3={big:false}
          this.big4={big:false}
          this.big5={big:false}
          this.big6={big:false}
          this.big7={big:true}
          this.det0=false
          this.det1=false
          this.det2=false
          this.det3=false
          this.det4=false
          this.det5=false
          this.det6=true
          this.colorchange1={
          colorchange:true,
          }
          this.colorchange2={
            colorchange:false,
            }
          this.much=true
      }
      // console.log(this.times)
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
}
</script>

<style scoped>
  .main{
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
  }
  .colorchange{
    color: #f03d37;
    border-bottom: 2px solid #f03d37;
  }
  .hidden{
    position: relative;
    left: 0px;
    width: 100%;
    height: 210px;
    overflow: hidden;
  }
  .ul{
    width: 1200px;
    overflow: hidden;
  }
  .sjx{
    position: absolute;
    top: 235px;
    left: 182px;
    width: 0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color: white;
  }
  .big{
    position: absolute;
    left: -5px;
    margin-top: 15px!important;
    width: 70px!important;
    height: 110px!important;
    border: 2px solid #fff;
  }
  .mgimg8{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
  }
  .mgimg9{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 77.5px;
  }
  .mgimg1{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 155px;
  }
  .mgimg2{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 232.5px;
  }
  .mgimg3{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 310px;
    /* border: 2px solid #fff; */
  }
  .mgimg4{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 387.5px;
  }
  .mgimg5{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 465px;
  }
  .mgimg6{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 542.5px;
  }
  .mgimg7{
    position: absolute;
    width: 65px;
    height: 95px;
    margin-top: 20px;
    margin-left: 620px;
  }
  .ul>li>img{
    width: 100%;
    height: 100%;
  }
  .pic1{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(205, 250, 179);
  }
  .pic2{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(204, 115, 115);
  }
  .pic3{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(63, 50, 50);
  }
  .pic4{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(226, 119, 119);
  }
  .pic5{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(50, 100, 194);
  }
  .pic6{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(180, 88, 59);
  }
  .pic7{
    position: relative;
    top: 70px;
    width: 1200px;
    height: 135px;
    background-color: rgb(51, 30, 30);
  }
  .head{
    position: relative;
  }
  .head>.named{
    position: absolute;
    font-size: 20px;
    left: 10px;
    top: 10px;
  }
  .head>.address{
    position: absolute;
    font-size: 15px;
    left: 10px;
    top: 40px;
    color: rgba(0, 0, 0, 0.5);
  }
  .head>img{
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
  }
  .head>.map{
    position: absolute;
    right: 20px;
    top: 45px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
  }
  .info{
    overflow: hidden;
    text-align: center;
  }
  .title{
    display: inline;
    /* position: absolute; */
    top: 270px;
    left: 40%;
    font-size: 17px;
    text-align: center;
    color: #333;
    font-weight: 700;
    margin-right: 5px;
  }
  .score{
    display: inline;
    /* position: absolute; */
    top: 273px;
    left: 220px;
    color: #ffb400;
    font-size: 16px;
  }
  .fen{
    display: inline;
    /* position: absolute; */
    top: 275px;
    left: 244px;
    color: #ffb400;
    font-size: 12px;
  }
  .intr{
    position: absolute;
    top: 300px;
    left: 90px;
    color: #999;
    font-size: 13px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .time{
    position: relative;
    top: 80px;
    width: 375px;
    height: 45px;
    font-size: 14px;
    color: #666;
    line-height: 45px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .today{
    position: absolute;
    left: 10px;
  }
  .tomorrow{
    position: absolute;
    left: 100px;
  }
  .after{
    position: absolute;
    left: 190px;
  }
  .single1{
    position: relative;
    top: 80px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .display{
    display: none;
  }
  .back{
    position: relative;
    top: 81px;
    text-align: center;
    width: 375px;
    height: 270px;
    background-color: #f0f0f0;
  }
  .text{
    margin-top: 12px;
    line-height: 1;
    font-size: 16px;
    color: #acacac;
  }
  .check{
    margin: 20px auto 0;
    border-radius: 5px;
    width: 170px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #f03d37;
    border: 1px solid rgba(0,0,0,.15);
    background-color: #fff;
    text-align: center;
  }
  .back >img{
    margin-top: 60px;
  }
  .dt1{
    position: relative;
    padding: 17px 12.5px;
    height: 53px;
  }
  .begin{
    position: absolute;
    font-size: 20px;
    color: #000;
    line-height: 1;
    white-space: nowrap;
  }
  .ending{
    position: absolute;
    font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    font-size: 12px;
    color: #999;
    line-height: 1;
    white-space: nowrap;
    margin-top: 30px;
  }
  .lang{
    position: absolute;
    left: 90px;
    font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    font-size: 13px;
    margin-top: 0px;
    line-height: 18px;
    color: #333;
    white-space: normal;
  }
  .place{
    position: absolute;
    width: 90px;
    margin-top: 20px;
    left: 90px;
    font-size: 11px;
    color: #999;
    white-space: normal;
  }
  .doll{
    position: absolute;
    left: 200px;
    font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    font-size: 13px;
    margin-top: 0px;
    line-height: 18px;
    white-space: normal;
    color: #f03d37;
    font-size: 11px;
  }
  .price{
    position: absolute;
    top: 12px;
    left: 215px;
    font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    color: #f03d37;
    font-size: 19px;
  }
  .buy{
    border: none;
    position: absolute;
    top: 50%;;
    right: 0;
    width: 45px;
    height: 27px;
    line-height: 20px;
    font-size: 12px;
    background-color: #f03d37;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    transform: translateY(-50%);
    margin-right: 12.5px;
  }
</style>